<template>
    <ul class="safety">
        <li v-for="(item, key) in info" :key="key" @click="tiao(item.path)">
            <span class="f14">{{item.name}}</span>
            <div class="set">
                {{item.cont}}
                <i class="icon iconfont icon-jiantouyou"></i>
            </div>
        </li>
    </ul>
</template>

<script>
    export default {
        name: 'safety',
        data() {
            return {
                info: [
                    {
                        name: '绑定手机号',
                        path: '/binding',
                        cont: '',
                    },
                    {
                        name: '修改密码',
                        path: '/changepsd',
                        cont: '',
                    },
                    // {
                    //     name: '绑定微信',
                    //     path: '',
                    //     cont: '未绑定',
                    // },
                ],
            }
        },
        methods: {
                getInfo() {
                let params = {
                    userId: this.$store.state.userId
                }
                this.$http.fetchGet('getUserDetail', params).then((res) => {
                    if(res.code == 200) {
                        this.info[0].cont = res.data.userPhone;
                    } else {
                        console.log(res.msg)
                    }
                }, (err) => {
                    console.log(err)
                })
            },
            tiao(path) {
                this.$router.push({
                    path: path
                })
            }
        },
        mounted() {
            this.getInfo()
        }
    }
</script>

<style lang="less" scoped>
    .safety{
        position: absolute;
        top: 0;
        bottom: 0;
        width: 100%;
        background: #f2f2f2;
        box-sizing: border-box;
        li{
            width: 100%;
            background: #fff;
            .padd(0, 20);
            .mb(10);
            .lh(88);
            display: flex;
            justify-content: space-between;
            box-sizing: border-box;
            span{
                color: #020202;
            }
            .set{
                color: #999;
                i.icon{
                    font-size: 10px;
                }
            }
        }
    }
</style>
